<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>上帝之手</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" href="img/favicon.ico">
    <style>
        body,html {
            position: relative;
            overflow: hidden;
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            font-family: "微软雅黑";
            display: flex;
            align-items: center;
            justify-content: center;
        }

        body {
            background: #d9e0e7;
        }

        header {
            position: fixed;
            top: 0;
            left: 0;
            height: 48px;
            width: 100%;
            background: #fff;
            font-size: 20px;
            font-weight: 600;
            line-height: 48px;
            letter-spacing: 1px;
            padding-left: 15px;
        }

        footer {
            position: fixed;
            bottom: 4px;
            left: 0;
            width: 100%;
            overflow: hidden;
            text-align: center;
        }

        a {
            text-decoration: none;
            color: #333;
        }

        #martix {
            width: 800px;
            text-align: center;
            z-index: 999;
            height: 300px;
            margin-top: -140px;
        }

        #title {
            margin: 35px 0 ;
            height: 30px;
            font-size: 30px;
            text-align: center;
            line-height: 30px;
            color:#242a30;
        }

        #unicorn {
            color: #FF9733;
            font-weight: 700;
            font-size: 30px;
            background: #d9e0e7;
        }

        #pick {
            width: 120px;
            height: 40px;
            vertical-align: middle;
            cursor: pointer;
            background: #00acac;
            color: #fff;
            border-radius: 40px;
            border: none;
            outline: none;
        }

        .telegram {
            position: absolute;
            z-index: -1;
            color: #24292e;
        }

        .hide {
            display: none;
        }

        .drink {
            margin: 5px 0;
            color: rgba(0,0,0,.5);
            background-color: #fed4e5;
            border-color: #fed4e5;
            box-shadow: 0 0 0 2px rgba(254, 212, 229, .5);
            padding: 2px 0;
            font-size: 14px;
        }

        #drink {
            width: 100px;
            height: 28px;
            line-height: 28px;
            cursor: pointer;
            background: #dc3545;
            color: #fff;
            border-radius: 50px;
            border: none;
            outline: none;
            position: absolute;
            bottom: 5px;
            left: 26px;
            font-size: 14px;
            z-index: 999;
            text-align: center;
            letter-spacing: 1px;
        }

        #book {
            font-family: "微软雅黑";
        }

        #diy {
            width: 100px;
            margin: 10px auto 0 auto;
            color: #00acac;
            font-size: 12px;
        }

        #submit {
            width: 120px;
            height: 30px;
            vertical-align: middle;
            cursor: pointer;
            background: rgb(0, 123, 255);
            color: #fff;
            border-radius: 40px;
            border: none;
            outline: none;
        }

        #popover {
            position: absolute;
            bottom: 45px;
            border: 1px solid rgba(0,0,0,.2);
            border-radius: 8px;
            background: #fff;
        }

        .popover-body {
            padding: 12px;
        }

        .arrow {
            position: absolute;
            width: 0;
            height: 0;
            border-width: 8px 16px;
            margin: 0 auto;
            border-style:solid;
            border-color:#fff transparent transparent transparent;
            left: 60px;
        }

        #eq {
            position: relative;
            overflow: hidden;
            width: 152px;
            height: 220px;
            margin: 0 auto;
        }
    </style>
</head>
<body>

    <header>上帝之手</header>

    <article id="martix">
        <p id="title">给可爱的柯欣小姐准备的随机选择机！（哆啦A梦音）</p>
        <p id="unicorn"></p>
		<p id="clue">PS : 请先点击自定义清单来制定备选项噢！</p>
        <input type="button" id="pick" value="Go Go Go !">
        <div id="diy">{自定义清单}</div>
        <div class="hide" id="content">
            <textarea id="book" rows="9" cols="53">在这里 输入 你想要的 备选项 用空格 隔开</textarea>
            <button id="submit">确定</button>
        </div>
    </article>

    <footer>

		<div class="drink">Copyright &copy; LuoanYun 2025 . All Rights Reserved</div>
      
    </footer>

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript">
        let btn = document.getElementById('pick'),
            book = document.getElementById('book'),
            unicorn = document.getElementById('unicorn'),
            title = document.getElementById('title'),
            diy = document.getElementById('diy'),
            content = document.getElementById('content'),
            submit = document.getElementById('submit'),
            drink = document.getElementById('drink'),
            popover = document.getElementById('popover'),
			clue = document.getElementById('clue')
            timer = null,
            run = 0,
            index = 0,
            flag = 0


        // 随机挑选礼物
        btn.addEventListener('click',function(){
			clue.innerText = ''
            // 删除多余空格，分割字符串
            let lollipop = book.value.replace(/ +/g, " ").replace(/^ | $/g, "").split(" ")
            if (!run) {
                btn.value = 'Stop'
                title.innerText = ''
                timer = setInterval(function(){
                    // Math.ceil 向上取整
                    // Math.random() 方法可返回介于 0 ~ 1 之间的一个随机数
                    let props = Math.ceil(Math.random() * lollipop.length),
                        propsTop = Math.ceil((Math.random() * (window.document.body.offsetHeight - 48)) + 48),
                        propsLeft = Math.ceil(Math.random() * (window.document.body.offsetWidth - 140)),
                        propsSize = Math.ceil(Math.random() * (24 - 12) + 12),
                        surge = lollipop[props - 1],
                        telegram = document.createElement('div')
                    telegram.setAttribute('class','telegram')
                    telegram.innerText = surge
                    unicorn.innerText = surge
                    telegram.style.cssText = `top: ${propsTop}px;left: ${propsLeft}px;color: "rgba(0,0,0,." + Math.random() + ")";font-size: ${propsSize}px`
                    document.body.appendChild(telegram)
                    // 动画
                    $('.telegram').fadeIn("slow", function () {
                        $(this).fadeOut("slow", function () {
                            $(this).remove()
                        })
                    })
                    run = 1
                },50)
            } else {
                title.innerText = '喵喵喵！就决定是你啦!'
                clearInterval(timer)
                btn.value = '试一试'
                run = 0
            }
            index++
            if(index == 7) {
                alert('女人！ 我劝你善良！')
                index = 0
            }
        })
        // 自定义菜单
        diy.addEventListener('click',function(){
            content.classList.remove('hide')
        })
        // 提交新菜单
        submit.addEventListener('click',function(){
            content.classList.add('hide')
        })
       
    </script>
</body>
</html>
